<template>
  <div class="not-found-container">
    <el-result icon="error" title="404 页面不存在" sub-title="您访问的页面可能已丢失在数字宇宙中">
      <template #extra>
        <!-- 显示错误路径 -->
        <div class="error-path">
          <el-icon><Location /></el-icon>
          <span class="path-text">错误路径：{{ errorPath }}</span>
        </div>

        <!-- 操作按钮组 -->
        <div class="action-buttons">
          <el-button type="primary" @click="goBack" :icon="ArrowLeft"> 返回上一页 </el-button>
          <el-button @click="goLogin" :icon="House"> 返回登录页 </el-button>
        </div>

        <!-- 自动跳转提示 -->
        <div class="countdown-tip">{{ countdown }}秒后自动跳转登录页</div>
      </template>
    </el-result>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Location, ArrowLeft, House } from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()

// 显示错误路径（处理多级路径）
const errorPath = ref('/' + (route.params.pathMatch?.join('/') || ''))

// 倒计时逻辑
const countdown = ref(10)
let timer = null

const startCountdown = () => {
  timer = setInterval(() => {
    if (countdown.value <= 1) {
      goLogin()
    } else {
      countdown.value--
    }
  }, 1000)
}

// 返回登录页
const goLogin = () => {
  clearInterval(timer)
  router.push('/login')
}

// 返回上一页
const goBack = () => {
  router.go(-1)
}

// 生命周期
onMounted(startCountdown)
onBeforeUnmount(() => clearInterval(timer))
</script>

<style lang="scss" scoped>
.not-found-container {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f7fa;

  .error-path {
    margin: 20px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #606266;

    .path-text {
      font-family: monospace;
      color: #f56c6c;
    }
  }

  .action-buttons {
    margin-top: 24px;
    display: flex;
    gap: 16px;
    justify-content: center;
  }

  .countdown-tip {
    margin-top: 16px;
    font-size: 12px;
    color: #909399;
    text-align: center;
  }
}
</style>
